<template>
	<view class="container">
		
		<view class="price-box">
			<text class="price" v-if="shipType == 'ship'">商家配送</text>
			<text class="price" v-if="shipType == 'self'">用户自提</text>
		</view>
		
		<view class="pay-type-list">
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="star-fill" :size="24" color="#19be6b"></tui-icon>
				<text class="tui-list-cell-name">可用水票数</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right" v-if="shipType == 'ship'">{{myTicket.ship_last_num}}</tui-tag>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right" v-if="shipType == 'self'">{{myTicket.self_last_num}}</tui-tag>
			</tui-list-cell>
			
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="bankcard" :size="24" color="#ff7900"></tui-icon>
				<text class="tui-list-cell-name">核销水票</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right" v-if="shipType == 'ship'">{{myTicket.ship_code}}</tui-tag>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right" v-if="shipType == 'self'">{{myTicket.self_code}}</tui-tag>
			</tui-list-cell>
			
			<view class="qr-code" v-if="shipType == 'ship'">
				<l-qrcode :value="myTicket.ship_code_url" size="300rpx" color="rgb(82,196,26)" />
			</view>
			
			<view class="qr-code" v-if="shipType == 'self'">
				<l-qrcode :value="myTicket.self_code_url" size="300rpx" color="rgb(82,196,26)" />
			</view>
			
			<tui-list-cell :arrow="false" class="tui-list">
				<text class="tui-list-cell-name">核销张数</text>
				<input placeholder-class="tui-phcolor" class="tui-input tui-right apply-num" name="apply_num" v-model="apply_num" placeholder="核销水票数目" min="1" step="1" maxlength="6" type="number" />
			</tui-list-cell>
			
			<tui-list-cell :arrow="false" class="tui-list">
				<text class="tui-list-cell-name">备注说明</text>
				<input placeholder-class="tui-phcolor" class="tui-input tui-right" name="remark" v-model="remark" placeholder="备注说明" maxlength="50" type="text" />
			</tui-list-cell>
			
			<view class="tui-line-cell">
				<tui-button type="green" class="btn-primary tui-btn-submit"  hover-class="btn-hover" @click="doPostEdit()">确认核销</tui-button>
			</view>
			<br><br><br><br><br><br>
		</view>
		<view class="tui-safe-area"></view>
		
		<footer-menu :tabCur="2"></footer-menu>
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiTag from "@/components/thorui/tui-tag/tui-tag"
	const util = require('../../utils/util.js')
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiButton,
			tuiListView,
			tuiListCell,
			tuiTag
		},
		data() {
			return {
				
				shopStat: {},
				myInfo:{},
				myTicket:{},
				
				apply_num: 1,
				remark: '',
				
			
				
				shipType: 'ship',
				code: '',
			}
		},
		computed: {
		
		},
		methods: {
			
	
			//我的个人信息
			getMyBaseInfo: function() {
				uni.request({
					url: this.$apiUrl+ '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						let resCode = res.data['code'];
						if(resCode == 401) {		//用户未登录
						//	uni.setStorageSync('shopId', 200);
							uni.navigateTo({ url: '/pages/my/login' });
						}else if(resCode == 200){
							let resData = res.data['data'];
							this.myInfo = resData;
							if(resData.is_shop_admin != 1) {
								this.tui.toast('该账号无权限核销,请重新登录后再扫码', 2000, false);
							//	uni.setStorageSync('shopId', 200);
								setTimeout(() => {
									uni.navigateTo({ url: '/pages/my/login' });
								}, 2000);
							}
							
						//	if(resData.shop_id != 200 || resData.shop_id != 211) {
							//	this.tui.toast('该账号无权限核销,请重新登录后再扫码', 2000, false);
							//	uni.setStorageSync('shopId', 200);
							//	setTimeout(() => {
							//		uni.navigateTo({ url: '/pages/my/login' });
							//	}, 2000);
						//	}
						}
					}
				});
			},
			
			
			//我的个人信息
			getTicketInfo: function() {
				uni.request({
					url: this.$apiUrl+ '/api/user/ticketInfoByCode',
					header: {
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						code: this.code,
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resData = res.data['data'];
						let resCode = res.data['code'];
						if(resCode == 200){
							this.myTicket = resData;
							this.shipType = resData.type;
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
			},
			
			//消费积分赠送
			doPostEdit: function() {
				if (util.isNullOrEmpty(this.apply_num)) { this.tui.toast('请填写要核销的数目'); return } 
				if(this.shipType == 'ship') {
					if(Number(this.apply_num) > Number(this.myTicket.ship_last_num)) { this.tui.toast('你的当前水票不足'); return } 
				}
			
				if(this.shipType == 'self') {
					if(Number(this.apply_num) > Number(this.myTicket.self_last_num)) { this.tui.toast('你的当前水票不足'); return } 
				}
				
				uni.request({
					url: this.$apiUrl + '/api/user/ticketUse',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						apply_num: this.apply_num,
						remark: this.remark,
						type: this.shipType,
						code: this.code,
					},
					success: (res) => {
						let resMsg = res.data['msg'];
						let resErr = res.data['error'];
						if(resErr == 0 ){		//发送成功的时候
							this.tui.toast('核销成功', 2000, false);
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/index'
								});
							}, 2000);
						}else{
							this.tui.toast(resMsg);
						}
					}
				});
			},
			
		},
		
		
		onLoad: function(options) {
			let code = options.code || 0;				//页面链接
			this.code = code;		
			this.getMyBaseInfo();
			this.getTicketInfo();
		},
		
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
			uni.stopPullDownRefresh()
		},
		
		onReachBottom: function() {
		//	this.tui.toast("试试商品搜索的功能吧~")
			return;
		},
		
	}
</script>


<style lang='scss'>
	
	
	.container{
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.pad-bottom{
		padding-bottom: 200rpx !important;
		margin-bottom: 200rpx !important;
	}
	
	.price-box {
		background-color: #fff;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #909399;
	}
	
	.price-box-self{
		margin-top:30rpx;
		
	}
	
	.price{
		font-size: 50rpx;
		color: #ff4700;
		margin-top: 12rpx;
	}
	
	.price:before{
		font-size: 40rpx;
	}
	
	.money-gold{
		margin-top: 12rpx;
		font-size: 30rpx;
	}
	
	.pay-type-list {
		margin-top: 6rpx;
		background-color: #fff;
	}
	
	
	.pay-type-icon{
		width: 100rpx;
		font-size: 52rpx;
	}

	.pay-type-tit{
		font-size: 36rpx;
		color: #222;
		margin-bottom: 4rpx;
	}
	
	.pay-type-con{
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		color: #aaa;
	}

	.to-pay-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 80rpx;
		margin: 80rpx auto 30rpx;
		font-size: 40rpx;
		color: #fff;
		background-color: #FF5A5F;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	.tui-box {
		width: 100%;
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.tui-assets-box {
		height: 178rpx;
		margin-top: 20rpx;
	}
	
	.tui-assets-box-list{
		margin-top: 20rpx;
	}
	
	.tui-assets-list {
		height: 84rpx;
	}
	
	.tui-assets-num {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		position: relative;
	}
	
	.tui-assets-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #666;
		padding-top: 6rpx;
	}
	
	.tui-tool-box {
		margin-top: 20rpx;
	}
	
	.tui-flex-wrap {
		flex-wrap: wrap;
		height: auto;
		padding-bottom: 30rpx;
	}
	
	
	.tui-list {
		display: flex;
		align-items: center;
		flex-direction:row;	
		flex-wrap:nowrap;
		justify-content:flex-start;
		align-content:baseline;
	}
	
	.tui-right {
		margin-left: auto !important;
		margin-right: 26rpx !important;
		font-size: 26rpx;
		line-height: 26rpx;
		color: #999;
	}
	
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
	
	.tui-end{
		margin-bottom: 200rpx !important;
	}

	.qr-code{display: flex;text-align: center;justify-content: center;align-items: center;align-content: center;margin-top:30rpx;padding-bottom: 100rpx;}
	
	.apply-num{font-size: 36rpx; color: #ff4700;}
	
	.tui-btn-submit {
		width: 550rpx !important;
		margin: 100rpx !important;
	}
	
</style>